import { memo } from 'react'
import { useEffect, useRef } from 'react'
import * as echarts from 'echarts'
import PropTypes from 'prop-types'

const BarChart = memo(
  ({ xData, yData, style = { width: '400px', height: '300px' } }) => {
    const chartRef = useRef(null)

    useEffect(() => {
      const chart = echarts.init(chartRef.current)
      chart.setOption({
        xAxis: {
          data: xData
        },
        yAxis: {},
        series: [
          {
            type: 'bar',
            data: yData
          }
        ]
      })
    }, [xData, yData])

    return <div ref={chartRef} style={style}></div>
  }
)

BarChart.propTypes = {
  xData: PropTypes.array.isRequired,
  yData: PropTypes.array.isRequired,
  style: PropTypes.object
}

BarChart.displayName = 'BarChart'
export default BarChart
